import { defineComponent, ref, computed } from 'vue'
import addressJSON from '@/assets/lib/area.json'

interface Address {
  label: string
  value: string
  children?: Address[]
}

interface AppForm {
  /** 地址ID */
  id: number
  /** 客户名称 */
  name: string
  /** 客户联系方式 */
  phone: string
  /** 客户省份 */
  province: string
  /** 客户市区 */
  country: string
  /** 客户区域 */
  area: string
  /** 详细地址 */
  address: string
}

function renderSelectOptions(data: Address[]) {
  return data.map(item => <option label={item.label} value={item.value} key={item.value} />)
}

export default defineComponent({
  name: 'AppAddress',
  setup() {
    const selectStyle = {
      minWidth: '100px'
    }

    const form = ref<AppForm>({
      /** 地址ID */ id: 0,
      /** 客户名称 */
      name: '',
      /** 客户联系方式 */
      phone: '',
      /** 客户省份 */
      province: null!,
      /** 客户市区 */
      country: null!,
      /** 客户区域 */
      area: null!,
      /** 详细地址 */
      address: ''
    })

    const provinceOptions = computed(() => addressJSON)
    const countryOptions = computed<Address[]>(() => {
      if (form.value.province) {
        const data = provinceOptions.value.find(item => item.value === form.value.province)
        if (!data) {
          return []
        }

        return data.children
      }

      return []
    })
    const areaOptions = computed<Address[]>(() => {
      if (form.value.country) {
        const data = countryOptions.value.find(item => item.value === form.value.country)
        if (!data) {
          return []
        }

        return data.children!
      }

      return []
    })

    function provinceOptionsChange(val: string, type: 'area' | 'province') {
      if (type === 'area') {
        form.value.area = null!
        return
      }

      form.value.country = null!
      form.value.area = null!
    }

    return () => (
      <form action='javascript:;'>
        <select
          v-model={form.value.province}
          onChange={event => {
            const target = event.target as HTMLOptionElement
            form.value.province = target.value
            console.log(form.value.province)
            provinceOptionsChange(target.value, 'province')
          }}
          style={selectStyle}>
          {renderSelectOptions(provinceOptions.value)}
        </select>
        <select
          v-model={form.value.country}
          onChange={event => {
            const target = event.target as HTMLOptionElement
            console.log(target.value)
            console.table(form.value)

            provinceOptionsChange(target.value, 'area')
          }}
          style={selectStyle}>
          {renderSelectOptions(countryOptions.value)}
        </select>
        <select
          v-model={form.value.area}
          onChange={event => {
            const target = event.target as HTMLOptionElement
            console.log(target.value)
            console.table(form.value)
          }}
          style={selectStyle}>
          {renderSelectOptions(areaOptions.value)}
        </select>
      </form>
    )
  }
})
